<template>
  <div class="list">
    <teleport to=".app-header">
      <van-nav-bar class="navBar" left-arrow @click-left="back">
        <template #title>
          <van-search
            v-model="value"
            shape="round"
            background="transparent"
            placeholder="请输入搜索关键词"
          />
        </template>
        <template #right>
          <van-button size="small" type="danger">搜索</van-button>
        </template>
      </van-nav-bar>
    </teleport>

    <template v-if="list.length > 0">
      <router-link
        v-for="(item, index) in list"
        :key="index"
        :to="{ name: 'detail', query: { proid: item.proid } }"
      >
        <van-card
          :num="item.isscle ? item.stock : 0"
          tag="标签"
          :price="
            item.discount != 10
              ? (item.discount * item.originprice).toFixed(2)
              : item.originprice
          "
          :desc="item.desc"
          :title="item.proname"
          :thumb="item.img1"
          :origin-price="item.discount == 10 ? '' : item.originprice"
        >
          <template #tags>
            <van-tag plain type="primary">{{ item.sales }}</van-tag>
          </template>
        </van-card>
      </router-link>
    </template>
    <template v-else>
      <van-empty
        image=""
        description="抱歉,暂无相关商品"
      />
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getCategoryBrandProListAPI } from "@/api/category.js";
import { showFailToast } from "vant";

let route = useRoute();

let query = route.query;
let list = ref([]);

let params = reactive({
  count: 1,
  limitNum: 10,
  ...query,
});
console.log(params);

watchEffect(async () => {
  try {
    var res = await getCategoryBrandProListAPI(params);
    console.log("某分类下的某品牌请求成功", res);

    if (res.code == 200) {
      list.value = res.data;
    } else if (res.code == 10003) {
      list.value = [];
    }
  } catch (err) {
    showFailToast(err.message);
  }
});
</script>

<style lang="scss" scoped></style>
